<template>
	<view>
		<view class="dingbu">
			<image class="fanhui" src="../../static/fanhui.png" @click="fanhui"></image>
			<view>
				<image class="sstp" src="../../static/sstb.png"></image>
				<input class="sskuan" type="text" value="" placeholder="查找门店" />
			</view>
			<image class="fanhui" :src="moshi==0?'../../static/map.png':'../../static/liebiao.png'" @click="qiehuan"></image>
		</view>
		<view class="mdlist" v-if="moshi==0">
			<view class="liebia" v-for="item in mendlist" :key="item.id" @click="gomendian(item.id)" >
				<image class="tupian" :src="imgUrl + item.image[0]" mode="aspectFill"></image>
				<view class="neirong">
					<view class="dianming">
						<view>{{item.mdname}}</view>
						<view class="pingf">{{item.redu}}</view>
					</view>
					<view>离你:{{item.juli}}</view>
					<view class="dizhi">{{item.city + item.area + item.address}}</view>
					<view class="hengphh">
						<image v-for="(pai,rens) in item.pdus" :key="rens" v-if="rens<5 && pai.kehu.touxiang" class="paidtoux" :src="imgUrl + pai.kehu.touxiang" mode="aspectFill"></image>
						<view class="chaocts" v-if="item.pdus.length>5">
							<view class="shulia">5</view>
							<text class="jiah">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mdmap" v-else>
			<map 
				class="xxmap" 
				:latitude="latitude" 
				:longitude="longitude" 
				:markers="mendlist"
				scale="12"
			/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude:22.812224,
				longitude:108.371195,
				moshi:0,
				area: "",
				city: "",
				mendlist:[],
				imgUrl: getApp().globalData.imgUrl,
			}
		},
		onLoad(){
			this.getdqweix();
		},
		onShow() {

		},
		onReady() {
			this.getMendList();
		},
		methods: {
			// 获取当前位置
			getdqweix(){
				var that = this;
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
						// console.log(111,res);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						that.getMendList();
				    }
				});
			},
			// 返回上一页
			fanhui(){
				wx.navigateBack({
					delta:1
				})
			},
			// 切换
			qiehuan(){
				if(this.moshi==0){
					this.moshi = 1
				}else{
					this.moshi = 0
				}
			},
			// 门店详情
			gomendian(id){
				uni.navigateTo({
					url:'../mdxisngq/mdxisngq?id='+id
				})
			},
			getMendList() {
				uni.request({
					url: getApp().globalData.url+'/client/GetMendian',
					data:{
						// area: this.area,
						// city: this.city,
						latitude: this.latitude,
						longitude: this.longitude,
					},
					method: "GET",
					header: {
						"Content-Type": "application/json"
					},
					success: (res) => {
						// console.log(222,res);
						if(res.data.code == 200) {
							this.mendlist = res.data.data;
						}
						
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dingbu{
		position: fixed;
		top: var(--status-bar-height);
		width: 710rpx;
		height: 45px;
		background: #f0f0f0;
		z-index: 999;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.fanhui{
			width: 20px;
			height: 20px;
		}
		.sskuan{
			background: #FFFFFF;
			width: 450rpx;
			padding: 8rpx 50rpx 8rpx 80rpx;
			border-radius: 30rpx;
		}
		.sstp{
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			margin: 8rpx 0 0 10rpx;
		}
		
	}
	// 列表
	.mdlist{
		margin-top: 45px;
		width: 710rpx;
		padding: 20rpx;
		.liebia{
			background: #F0F0F0;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.tupian{
				width: 200rpx;
				height: 230rpx;
				border-radius: 20rpx 0 0 20rpx;
			}
			.neirong{
				font-size: 28rpx;
				color: #8b8b8b;
				margin-left: 20rpx;
				.dianming{
					font-size: 35rpx;
					font-weight: bold;
					color: #111111;
					// margin-bottom: 10rpx;
					width: 470rpx;
					display: flex;
					justify-content: space-between;
					.pingf{
						font-size: 40rpx;
						color: #ff0000;
						font-style:oblique;
					}
				}
				.dizhi{
					font-size: 26rpx;
				}
				.hengphh{
					display: flex;
					align-items: center;
					margin: 10rpx 0 10rpx 10rpx;
					.paidtoux{
						width: 60rpx;
						height: 60rpx;
						border-radius: 30rpx;
						margin-left: -10rpx;
						box-shadow: 0rpx 0rpx 5rpx 5rpx #505050;
					}
					.chaocts{
						display: flex;
						align-items: center;
						margin-left: -10rpx;
						z-index: 99;
						.shulia{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 60rpx;
							height: 60rpx;
							background: #ff007f;
							font-weight: bold;
							font-size: 35rpx;
							color: #FFFFFF;
							border-radius: 30rpx;
							box-shadow: 0rpx 0rpx 5rpx 5rpx #505050;
						}
						.jiah{
							font-size: 45rpx;
							font-weight: bold;
							color: #ff007f;
							margin-left: 5rpx;
							text-shadow: 3rpx 3rpx 5rpx 5rpx #505050;
						}
					}
				}
			}
		}
	}
	.mdmap{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		.xxmap{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
</style>
